import React, { Fragment, useEffect } from 'react'
import { useRef } from 'react'
import {
  Player,
  ControlBar,
  PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled
  ReplayControl, // 后退按钮
  ForwardControl, // 前进按钮
  CurrentTimeDisplay,
  TimeDivider,
  PlaybackRateMenuButton, // 倍速播放选项
  VolumeMenuButton,
  BigPlayButton,
} from 'video-react'
import './index.less'
import '../../../node_modules/video-react/dist/video-react.css' // import css
import { useState } from 'react'
interface IProps {
  playCallBack?: (...set: any) => void
  poster?: string
  src: string
}
function Index(props: IProps) {
  const playerRef = useRef(null)
  const [isClicked, setClicked] = useState(false)
  const handlePlay = () => {
    if (!isClicked && typeof props.playCallBack === 'function') {
      props.playCallBack()
      setClicked(true)
    }
  }

  return (
    <Fragment>
      <div className="videoPlayerClass" onClick={handlePlay}>
        <Player ref={playerRef} poster={props?.poster}>
          <BigPlayButton position="center" />
          <source src={props.src} type="video/mp4" />
          <ControlBar autoHide={false} disableDefaultControls={false}>
            {/* <ReplayControl seconds={10} order={1.1} /> */}
            {/* <ForwardControl seconds={30} order={1.2} /> */}
            <PlayToggle />
            <CurrentTimeDisplay order={4.1} />
            <TimeDivider order={4.2} />
            {/* <PlaybackRateMenuButton rates={[3, 2, 1.5, 1, 0.5]} order={7.1} /> */}
            <VolumeMenuButton vertical />
          </ControlBar>
        </Player>
      </div>
    </Fragment>
  )
}

export default Index
